<!DOCTYPE HTML>
<html>
 <head>
  <title> 编辑学生信息</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <link href="assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/bui-min.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/page-min.css" rel="stylesheet" type="text/css" />   <!-- 下面的样式，仅是为了显示代码，而不应该在项目中使用-->
   <link href="assets/css/prettify.css" rel="stylesheet" type="text/css" />
   <style type="text/css">
    code {
      padding: 0px 4px;
      color: #d14;
      background-color: #f7f7f9;
      border: 1px solid #e1e1e8;
    }
   </style>
   
   <style type="text/css">
  /** 自定义提示样式**/
  .custom{
    background-color: #fff;
    border:1px solid #ddd;
    padding:10px;
    word-wrap: break-word;
  }
</style>
 </head>
 <body>
  
  <div class="container">
    <form id ="J_Form" class="form-horizontal" action="success.html">
      <h3>基本信息</h3>
      <div class="row">
        <div class="control-group span12">
          <label class="control-label"><s>*</s>学生姓名：</label>
          <div class="controls">
            <input name="sname" type="text" class="control-text" data-rules="{required:true}">
          </div>
        </div>
        <div class="control-group span12">
          <label class="control-label"><s></s>学生编号：</label>
          <div class="controls">
            <input name="sid" type="text" class="control-text" data-rules="{required:false}">
          </div>
        </div>
      </div>
      <div class="row">
        <div class="control-group span12">
          <label class="control-label">性别：</label>
          <div class="controls">
            <select name="sex">
              <option value="0">男</option>
              <option value="1">女</option>
            </select>
          </div>
        </div>
        <div class="control-group12 span12">
          <label class="control-label"><s>*</s>出生日期：</label>
          <div class="controls">
            <input name="birthday" type="text" class="calendar" data-rules="{required:true}">
          </div>
        </div>
      </div>
      <div class="row">
        <div class="control-group span12">
          <label class="control-label"><s>*</s>家庭住址：</label>
          <div class="controls">
            <input name="address" type="text" class="span8 span-width control-text"  data-rules="{required:true}">
          </div>
        </div>
      </div>
      <hr/>
      <h3>学校信息</h3>
      <div class="row">
        <div class="control-group span12">
          <label class="control-label"><s>*</s>学校名称：</label>
          <div class="controls">
            <input name="" type="text" class=" control-text" data-rules="{required:true}">
          </div>
        </div>
        <div class="control-group span12">
          <label class="control-label"><s>*</s>入学日期：</label>
          <div class="controls bui-form-group" data-rules="{dateRange:true}" >
            <input name="start" type="text" class="calendar" data-rules="{required:true}"><span> - </span><input name="end" type="text" class="calendar" data-rules="{required:true}">
          </div>
        </div>
      </div>
      <div class="row">
        <div class="control-group span24">
          <label class="control-label"><s>*</s>学校地址：</label>
          <div class="controls">
            <input type="text" class="control-text span8 span-width"  data-rules="{required:true}">
          </div>
        </div>
        
      </div>
      <div class="row">
        <div class="control-group span24">
          <label class="control-label">备注：</label>
          <div class="controls control-row4">
            <textarea name="" id="" class="span8 span-width"></textarea>
          </div>
        </div>
      </div>
      <hr/>
      <h3>教育经历</h3>
      <div class="row">
        <div class="span21 offset3 control-row-auto">
          <div id="grid"></div>
        </div>
      </div>
      
      <div class="row">
        <div class="form-actions offset3">
          <button type="submit" class="button button-primary">保存</button>
          <button type="reset" class="button">重置</button>
        </div>
      </div>
    </form>

    <div id="J_Temp" class="hide">
       <form class="form-horizontal" id="J_Education">
        <div class="row">
          <div class="control-group span6">
            <label class="control-label control-label-small"><s>*</s>学校名称</label>
            <div class="controls">
               <input type="text" class="control-text" name="school"/>
               <input type="hidden" name="id" />
            </div>
          </div>
          <div class="control-group span6">
            <label class="control-label control-label-small"><s>*</s>学校网址</label>
            <div class="controls">
               <input type="text" class="control-text" name="url"/>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="control-group span6">
            <label class="control-label control-label-small"><s>*</s>入学日期</label>
            <div class="controls">
               <input type="text" class="calendar" name="enter"/>
            </div>
          </div>
          <div class="control-group span6">
            <label class="control-label control-label-small"><s>*</s>毕业日期</label>
            <div class="controls">
               <input type="text" class="calendar" name="outter"/>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="control-group span12">
            <label class="control-label control-label-small"><s>*</s>备注：</label>
            <div class="controls control-row4">
              <textarea name="memo" class="span9 span-width"></textarea>
            </div>
          </div>
        </div>
        <input type="hidden"  id="J_Records"/>
       </form>
  </div>
  
  <div id="grid"></div>
  
   <p>
      <button id="btnSave" class="button button-primary">提交</button>
    </p>
    
    <h2>提交结果</h2>
    <div class="row">
      <div id="log" class="well span12">

      </div>
    </div>
    
     <div id="content" class="hide">
      <form id="J_Form" class="form-horizontal">
        <div class="row">
          <div class="control-group span8">
            <label class="control-label"><s>*</s>学校名称：</label>
            <div class="controls">
              <input name="school" type="text" data-rules="{required:true}" class="input-normal control-text">
            </div>
          </div>
          <div class="control-group span8">
            <label class="control-label"><s>*</s>学生类型：</label>
            <div class="controls">
              <select  data-rules="{required:true}"  name="type" class="input-normal"> 
                <option value="">请选择</option>
                <option value="zou">走读</option>
                <option value="zhu">住校</option>
              </select>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="control-group span15 ">
            <label class="control-label">在校日期：</label>
            <div id="range" class="controls bui-form-group" data-rules="{dateRange : true}">
              <input name="enter" class="calendar" type="text"><label>&nbsp;-&nbsp;</label><input name="outter" class="calendar" type="text">
            </div>
          </div>
        </div>
        <div class="row">
          <div class="control-group span15">
            <label class="control-label">备注：</label>
            <div class="controls control-row4">
              <textarea name="memo" class="input-large" type="text"></textarea>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
  
  <div id='list1'></div>
  <div id='calendar'></div>
  
   <div class="detail-section">  
      <h3>提示信息</h3>
      <div class="row">
        <div class="span8 offset3 well">
          <a id="t1" href="#">左边无样式</a><br>
          <a id="t2" href="#">右边，使用tips-success</a><br>
          <a id="t3" href="#">上边，使用tips-warning</a><br>
          <a id="t4" href="#">下边的提示</a><br>
          <a id="t5" href="#">左上边的提示</a><br>
          <a id="t6" href="#">右上边的提示</a><br>
          <a id="t7" href="#">左下边的提示</a><br>
          <a id="t8" href="#">右下边的提示</a><br>
        </div>
      </div>
    </div>
    
    <div id="tip" class="custom" style="visibility:hidden">
        <table class="table">
          <thead>
            <tr>
              <th>#</th>
              <th>姓名</th>
              <th>别名</th>
              <th>Username</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>张三</td>
              <td>张某某</td>
              <td>@mdo</td>
            </tr>
            <tr>
              <td>2</td>
              <td>李四</td>
              <td>李证明</td>
              <td>@fat</td>
            </tr>
            <tr>
              <td>3</td>
              <td>王五</td>
              <td>王明</td>
              <td>@twitter</td>
            </tr>
          </tbody>
        </table>
      </div>
      
      <p>
        <label>选择日期：</label><input type="text" class="calendar" />
      </p>
      
       <div>
      <button id="btnShow" class="button button-primary">显示</button>
    </div>
    
    <button id="btnShowAlert" class="button button-primary">显示</button>
    
    <div id="m" style="border:1px solid red;width:200px;height:200px;"></div>
     <p>
      <button id="mask" class="button">屏蔽</button>
      <button id="unmask" class="button">取消屏蔽</button>
      <button id="maskFull" class="button">屏蔽整个窗口</button>
    </p>
  
  
  <script type="text/javascript" src="assets/js/jquery-1.8.1.min.js"></script>
  <script type="text/javascript" src="assets/js/bui-min.js"></script>

  <script type="text/javascript" src="assets/js/config-min.js"></script>
  <script type="text/javascript">
    //BUI.use('common/page');
  </script>
  <script type="text/javascript">
    BUI.use('bui/form',function (Form) {
      var form = new Form.HForm({
        srcNode : '#J_Form'
      }).render();
    });
    
    
    
    BUI.use(['bui/grid','bui/data'],function (Grid,Data) {

    var columns = [{title : '学校名称',dataIndex :'school'},
            {title : '入学日期',dataIndex :'enter'},
            {title : '毕业日期',dataIndex :'outter'},
            {title : '备注',dataIndex :'memo',width:200},
            {title : '操作',renderer : function(){
              return '<span class="grid-command btn-edit">编辑</span>';
            }}
          ],
      //默认的数据
      data = [
        {id:'1',school:'武汉第一初级中学',enter:'1999-09-01',type: 'zou',outter:'2002-07-01',memo:'表现优异，多次评为三好学生'},
        {id:'2',school:'武汉第一高级中学',enter:'2002-09-01',type: 'zou',outter:'2005-07-01',memo:'表现优异，多次评为三好学生'}
      ],
      store = new Data.Store({
        data:data,
        sortInfo : {
	     field : 'id',
	     direction : 'DESC' //ASC,DESC
	   }
      }),
      editing = new Grid.Plugins.DialogEditing({
        contentId : 'content',
        triggerCls : 'btn-edit'
      }),
      grid = new Grid.Grid({
        render : '#grid',
        columns : columns,
        width : 700,
        forceFit : true,
        store : store,
        plugins : [Grid.Plugins.CheckSelection,editing],
        tbar:{
          items : [{
            btnCls : 'button button-small',
            text : '<i class="icon-plus"></i>添加',
            listeners : {
              'click' : addFunction
            }
          },
          {
            btnCls : 'button button-small',
            text : '<i class="icon-remove"></i>删除',
            listeners : {
              'click' : delFunction
            }
          }]
        }

      });
    grid.render();

    function addFunction(){
      var newData = {school :'请输入学校名称aa'};
      editing.add(newData); //添加记录后，直接编辑
    }

    function delFunction(){
      var selections = grid.getSelection();
      store.remove(selections);
    }
    var logEl = $('#log');
    $('#btnSave').on('click',function(){

      var records = store.getResult();
      logEl.text(BUI.JSON.stringify(records));
    });
  });
  
  
  BUI.use(['bui/list'],function(List){
      
      var items = [
            {
              title:'日历',
              href : 'javascript:alert(1);',
             // src : 'assets/img/calendar.png',
              desc:'<p>日历控件包括，日历选择器，日历控件，月份选择控件，时间选择控件。</p>'
            },
            {
              title:'弹出框',
              href : 'javascript:void(0);',
             // src : 'assets/img/dialog.png',
              desc:'<p>弹出框包括：模态窗口，非模态窗口，可以自定义内容和按钮，方便灵活的使用。</p>'
            },
            {
              title:'消息提示',
              href : 'javascript:void(0);',
            //  src : 'assets/img/message.png',
              desc:'<p>提示/确认框包括：消息、警告、确认、错误已经成功提示，确认框同时包含确认和取消，都可以自定义内容和回调函数。</p>'
            },
            {
              title:'菜单',
              href : 'javascript:void(0);',
            //  src : 'assets/img/menu.png',
              desc:'<p>分为右键菜单，弹出菜单，左侧菜单以及各种自定义的菜单</p>'
            }
        ],
        tpl = [
          '<li class="bui-list-item">',
            '<div class="demo-list-content">',
              '<a class="demo-list-link" href="{href}">',
                '<img src="{src}"/>',
              '</a>',
              '<div class="demo-list-des">',
                '<h3>{title}</h3>',
                '{desc}',
              '</div>',
            '</div>',
            '<div class="demo-list-border">',
            '</div>',
          '</li>'
        ];
        list = new List.SimpleList({
            render:'#list1',
            elCls:'demo-list clearfix',
            items:items,
            itemTpl:tpl.join('')
        });
      list.render();
      
      });
      
       BUI.use('bui/calendar',function(Calendar){
		   var calendar = new Calendar.Calendar({
		     render:'#calendar'
		   });
		   calendar.set('selectedDate',new Date('2013-9-01'));
		   calendar.render();
		   calendar.on('selectedchange',function (ev) {
		     alert(ev.date);
		   });
		});
		
		
		BUI.use('bui/tooltip',function (Tooltip) {
    
      //不使用模板的，左侧显示
      var t1 = new Tooltip.Tip({
        trigger : '#t1',
        alignType : 'left', //方向
        showArrow : false, //不显示箭头
        offset : 5, //距离左边的距离
        title : '无任何样式，<br>左边的提示信息'
      });
      t1.render();
 
      //使用模板右边显示
      var t2 = new Tooltip.Tip({
        trigger : '#t2',
        alignType : 'right',
        offset : 10,
        title : '右边的提示信息',
        elCls : 'tips tips-success',
        titleTpl : '<span class="x-icon x-icon-small x-icon-success"><i class="icon icon-white icon-question"></i></span>\
        <div class="tips-content">{title}</div>'
      });
      t2.render();
 
      //使用模板上边显示
      var t3 = new Tooltip.Tip({
        trigger : '#t3',
        alignType : 'top',
        offset : 10,
        title : '上边的提示信息',
        elCls : 'tips tips-warning',
        titleTpl : '<span class="x-icon x-icon-small x-icon-error"><i class="icon icon-white icon-bell"></i></span>\
        <div class="tips-content">{title}</div>'
      });
      t3.render();
 
      //使用模板下边显示
      var t4 = new Tooltip.Tip({
        trigger : '#t4',
        alignType : 'bottom',
        offset : 10,
        title : '下边的提示信息<br>下边的提示信息',
        elCls : 'tips tips-warning tips-small',
        titleTpl : '<span class="x-icon x-icon-small x-icon-warning"><i class="icon icon-white icon-question"></i></span>\
        <div class="tips-content">{title}</div>'
      });
      t4.render();
 
      //使用模板左上方显示
      var t5 = new Tooltip.Tip({
        trigger : '#t5',
        alignType : 'top-left',
        offset : 10,
        title : '左上边',
        elCls : 'tips tips-warning tips-small',
        titleTpl : '<span class="x-icon x-icon-small x-icon-warning"><i class="icon icon-white icon-question"></i></span>\
        <div class="tips-content">{title}</div>'
      });
      t5.render();
 
      //使用模板右上方显示
      var t6 = new Tooltip.Tip({
        trigger : '#t6',
        alignType : 'top-right',
        offset : 10,
        title : {begin : '2010-1-1',end : '2013-2-3'}, //使用复杂的对象
        elCls : 'tips tips-no-icon',
        titleTpl : '<div class="tips-content">起始日期：{begin}<br>结束日期：{end}</div>'
      });
      t6.render();
 
      //使用模板左下方显示
      var t7 = new Tooltip.Tip({
        trigger : '#t7',
        alignType : 'top-left',
        offset : 3,
        width:20,
        title : 'wimaewoawmasifwaofaoewfmasdfjawoeifjawofijasidjfoasdjfaoiwjfaisdfasdfiaoe', //自定义大段文本
        elCls : 'custom',
        titleTpl : '<p>{title}</p>'
      });
      t7.render();
 
      //使用srcNode形式直接使用DOM显示，显示在右下方
      var t8 = new Tooltip.Tip({
        trigger : '#t8',
        alignType : 'bottom-right',
        offset : 10,
        srcNode : '#tip'
      });
      t8.render();
 
 
    });
    
     BUI.use('bui/calendar',function(Calendar){
          var datepicker = new Calendar.DatePicker({
            trigger:'.calendar',
            autoRender : true
          });
        });
        
        
         BUI.use('bui/overlay',function(Overlay){
          /* var dialog = new Overlay.Dialog({
            title:'非模态窗口',
            width:500,
            height:300,
            mask:false,
            buttons:[],
            bodyContent:'<p>这是一个非模态窗口,并且不带按钮</p>'
          }); */
          
          var dialog = new Overlay.Dialog({ 
          title:'自定义按钮', 
          width:500, height:300, mask:false, 
          buttons:[ 
          	{ text:'自定义',
          	 elCls : 'button button-primary', 
          	 handler : function(){ this.hide(); } 
          	 },
          	 { text:'关闭', elCls : 'button', handler : function(){ this.hide();
          	 } } ],
          	  bodyContent:'<p>这是一个非模态窗口,并且不带按钮</p>'
          }); 
        dialog.show();
        $('#btnShow').on('click',function () {
          dialog.show();
        });
      });
      
      BUI.use('bui/overlay',function(overlay){
     
	      function show () {
	        BUI.Message.Alert('这只是简单的提示信息',function(){
	          alert('确认');
	        },'info');
	      }
	 
	      //show();
	      $('#btnShowAlert').on('click',function () {
	        show();
	      });
      
      });
      
      
        BUI.use(['bui/mask'],function(Mask){
      
      
	      $('#mask').on('click',function(){
	        Mask.maskElement('#m');
	      });
	 
	      $('#unmask').on('click',function(){
	        Mask.unmaskElement('#m');
	      });
	 
	      $('#maskFull').on('click',function(){
	        Mask.maskElement('body');
	      });
	 
	      $(document).delegate('.bui-ext-mask','click',function(ev){
	        var sender = $(ev.currentTarget);
	        sender.remove();
	      });
	   });
  </script>

<body>
</html>  